<template>
  <div class="home-count">
    <div class="left">
      <div class="item" v-for="(item, index) in data.left" :key="index">
        <div class="icon">
          <img :src="item.icon" alt="" />
        </div>
        <div class="info">
          <div class="top">
            <span class="num">{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="bottom">
            <span class="name">{{ item.name }}</span>
            <span class="ratio">在线率{{ item.ratio }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="item" v-for="(item, index) in data.right" :key="index">
        <div class="info">
          <div class="top">
            <span class="num">{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="bottom">
            <span class="ratio">在线率{{ item.ratio }}</span>
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
        <div class="icon">
          <img :src="item.icon" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        left: [
          {
            name: "照明",
            icon: "images/home/icon_1.png",
            num: 233,
            unit: "盏",
            ratio: "30%",
          },
          {
            name: "监控",
            icon: "images/home/icon_2.png",
            num: 43,
            unit: "个",
            ratio: "20%",
          },
          {
            name: "媒体",
            icon: "images/home/icon_3.png",
            num: 45,
            unit: "台",
            ratio: "43%",
          },
          {
            name: "广播",
            icon: "images/home/icon_4.png",
            num: 122,
            unit: "台",
            ratio: "54%",
          },
        ],
        right: [
          {
            name: "气象",
            icon: "images/home/icon_5.png",
            num: 36,
            unit: "个",
            ratio: "78%",
          },
          {
            name: "报警",
            icon: "images/home/icon_6.png",
            num: 78,
            unit: "个",
            ratio: "56%",
          },
          {
            name: "充电",
            icon: "images/home/icon_7.png",
            num: 45,
            unit: "个",
            ratio: "87%",
          },
          {
            name: "5G",
            icon: "images/home/icon_8.png",
            num: 80,
            unit: "个",
            ratio: "54%",
          },
        ],
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss">

  /*总数*/
  .home-count {
    .item {
      padding-top: 30px;
      font-size: 14px;
      .icon {
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .name {
        color: $gray9;
      }
      .ratio {
        padding: 0 4px;
        color: $main_color;
      }
      .num {
        font-size: 20px;
        color: $yellow;
      }
      .unit {
        padding: 0 4px;
        font-size: 12px;
      }
    }
  }
  .left {
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    padding-top: 360px;
    padding-left: 20px;
    padding-right: 100px;
    z-index: 0;
    background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 40%,
      rgba(0, 0, 0, 0)
    );
    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: $white;
      .info {
        margin-left: 10px;
      }
    }
  }
  .right {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    padding-top: 360px;
    padding-right: 20px;
    padding-left: 100px;
    z-index: 0;
    background-image: linear-gradient(
      -90deg,
      rgba(0, 0, 0, 0.8) 40%,
      rgba(0, 0, 0, 0)
    );
    .item {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: $white;
      text-align: right;
      .info {
        margin-right: 10px;
      }
    }
  }

</style>